<template>
  <view class="equipment-details">
    <swiper class="swiper">
      <swiper-item v-for="(banner, index) of banners" :key="banner.id">
        <image
          :src="banner"
          mode="aspectFit"
          @click="previewImage(banners, index)"
        />
      </swiper-item>
    </swiper>
    <view class="cont">
      <view class="flex-row">
        <view class="title">设备序列号：{{ details.host_serial_no }}</view>
        <view
          :class="['run-status', details.is_abnormal == 1 && 'exception']"
          >{{ details.is_abnormal == 1 ? '异常' : '正常' }}</view
        >
      </view>

      <view class="status">
        <view>使用状态：{{ details.use_state == 0 ? '空闲' : '使用中' }}</view>
        <view>巡检时间：{{ getTime() }}</view>
      </view>
      <view class="address flex justify-between">
        <view class="text">{{ details.region }}{{ details.address }}</view>
        <image class="nav-icon" src="/static/nav.png" @click.stop="tapNavMap" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { fetchDeviceInfo, postNav } from '@/api'
import { previewImage } from '@/utils'

const details = ref({})

const banners = computed(() => details.value.img?.split('|') || [''])

onLoad(e => {
  fetchDeviceInfo(e?.serialNum).then(res => (details.value = res))
})

function tapNavMap() {
  postNav({
    latitude: +details.value.latitude,
    longitude: +details.value.longitude,
    region: details.value.region,
    address: details.value.address,
    host_serial_no: details.value.host_serial_no
  })
  uni.openLocation({
    address: details.value.region + details.value.address,
    latitude: +details.value.latitude,
    longitude: +details.value.longitude
  })
}

function getTime() {
  if (!details.value.last_inspection_at) return '未知'

  const date = details.value.last_inspection_at
    ? new Date(details.value.last_inspection_at * 1000)
    : Date.now()
  return date.toLocaleString()
}
</script>

<style scoped lang="scss">
.equipment-details {
  .swiper {
    height: 500rpx;
  }
  .cont {
    padding: 40rpx 30rpx;
    .title {
      color: #333;
      font-size: 34rpx;
      font-weight: bold;
    }
    .run-status {
      --color: #55ba63;
      color: var(--color);
      font-size: 26rpx;
      display: flex;
      align-items: center;
      column-gap: 10rpx;
      flex-shrink: 0;
      &.exception {
        --color: #cf4a42;
      }
      &::before {
        content: '';
        display: block;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: var(--color);
      }
    }
    .status {
      color: #333;
      font-size: 26rpx;
      padding-top: 10rpx;
      padding-bottom: 30rpx;
      line-height: 40rpx;
    }
    .address {
      padding-top: 30rpx;
      border-top: 2rpx solid #efefef;
      font-size: 26rpx;
      align-items: center;
      .text {
        color: #333;
        @include ellipsis(2);
        margin-right: 20rpx;
      }
      .nav-icon {
        width: 48rpx;
        height: 48rpx;
        flex-shrink: 0;
      }
    }
  }
}
</style>
